<!DOCTYPE html>
<html data-th-replace="~{layout :: layout(~{::head/content()}, 'blog', ~{::div})}">
<head>
    <title data-th-inline="text">[[${post.title}]]</title>
    <link rel="stylesheet" type="text/css" data-th-href="@{/css/blog.css}"/>

    <!-- Twitter card -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@springcentral">
    <meta name="twitter:title" data-th-content="${post.title}">
    <meta name="twitter:description" data-th-content="${post.renderedSummary}">
    <meta name="twitter:creator" data-th-if="${post.author.hasTwitterUsername()}"
          data-th-content="'@' + ${post.author.twitterUsername}">
    <meta name="twitter:image:src" data-th-unless="${#strings.isEmpty(post.author.avatarUrl)}"
          data-th-content="${post.author.avatarUrl} + '?s=200'">

    <!-- http://opengraphprotocol.org/ -->
    <meta property="og:title" data-th-content="${post.title}">
    <meta property="og:image" data-th-unless="${#strings.isEmpty(post.author.avatarUrl)}"
          data-th-content="${post.author.avatarUrl} + '?s=200'">
    <meta property="og:description" data-th-content="${post.renderedSummary}">
    <meta property="og:type" content="article">
    <meta property="og:article:published_time" data-th-content="${post.publishAt}">
</head>
<body>
<div data-th-object="${post}">
    <main class="body--container container-fluid">
        <div class="main-body--wrapper">
            <div class="desktop-only" data-th-unless="${title}">
                <h1 class="blog-category active content--title">
                    Spring Blog
                </h1>
                <ul class="right-pane-widget--container secondary-nav with-icon small">
                    <li class="blog-category">
                        <a data-th-href="@{/blog}">All Posts</a>
                        <a class="pull-right" data-th-href="@{/blog/category/blog.atom}"><i class="fas fa-rss-square"></i></a>
                    </li>
                    <li data-th-each="category : ${categories}" class="blog-category">
                        <a data-th-href="@{'/blog/category/' + ${category.urlSlug}}" data-th-text="${category.displayName}">All
                            Posts</a>
                        <a class="pull-right" data-th-href="@{'/blog/category/'+${category.urlSlug}}+'.atom'"><i
                                class="fas fa-rss-square"></i></a>
                    </li>
                </ul>
            </div>
            <div class="row-fluid blog--wrapper">
                <div class="span8 mobile-left-pane">
                    <article class="blog--container blog-preview" id="content"
                             data-th-insert="~{blog/_full_post :: full-post}">
                    </article>
                </div>
                <aside id="sidebar" class="span4 mobile-right-pane">
                    <div data-th-insert="~{blog/_right-pane :: right-pane}"></div>
                </aside>
            </div>
        </div>
    </main>
</div>
</body>
</html>
